<template>
  <div class="orderSuccessDetail" v-if="detail" v-loading="loading">
    <div class="orderCaption buy" v-if="detail.name==='sellram'">卖出RAM</div>
    <div class="orderCaption buy" v-else>买入RAM</div>
    <div class="orderheard flexc">
      <div>
        <p>{{$t('order.subAvgPrice')}}</p>
        <span>
          {{detail.dealPrice || '--'}}<span class="wordWrap"
          style="color: #999">EOS/KB</span>
        </span>
      </div>
      <div>
        <p>{{$t('jy.cjl')}}</p>
        <span>
          {{detail.dealCount || '--'}}<span class="wordWrap"
          style="color: #999">KB</span>
        </span>
      </div>
      <div>
        <p>{{$t('jy.cje')}}</p>
        <span>
          {{detail.subAvgMoney || '--'}}<span class="wordWrap"
          style="color: #999">EOS</span>
        </span>
      </div>
      <div>
        <p>{{$t('order.subAvgTime')}}</p>
        <span>{{detail.time}}</span>
      </div>
      <div>
        <p>TrxID</p>
        <a class="trxidbox" :href="`https://bloks.io/tx/${orderDetailId.id}`" target="_blank">{{orderDetailId.id}}</a>
      </div>
    </div>
  </div>
  <div style="line-height: 50px" class="center" v-else>{{$t('myWallet.loadData')}}</div>
</template>

<script>

import axios from 'axios';

export default {
  name: 'OrderSuccessDetail',
  data() {
    return {
      detail: null,
      loading: false,
    }
  },
  props: {
    orderDetailId: Object,
  },
  computed: {
  },
  watch: {
    'orderDetailId.id': function change(val) {
      if (!val) {
        this.$emit('listenDetailClose', false);
        return;
      }
      this.handleOrderSuccessDetail();
    },
  },
  mounted() {
    this.handleOrderSuccessDetail();
  },
  methods: {
    // 获取交易成功订单详情
    handleOrderSuccessDetail() {
      this.loading = true;
      this.detail = {
        name: '',
        dealPrice: '--', // 成交价
        dealCount: '--', // 成交量
        subAvgMoney: '--', // 成交金额
        time: '--'
      };
      const params = {
        id: this.orderDetailId.id,
      };
      // 指定节点
      const url = 'https://api.eosnewyork.io';
      axios.post(`${url}/v1/history/get_transaction`, params).then((result) => {
        const res = result.data;
        const name = res.traces[0].act.name;
        const money = this.orderDetailId.amount;
        if (name === 'sellram') { // 卖出ram
          const bytes = res.traces[0].act.data.bytes / 1024;
          this.detail = {
            name,
            dealPrice: (money / bytes).toFixed(2), // 成交价
            dealCount: bytes.toFixed(4), // 成交量
            subAvgMoney: money, // 成交金额
            time: res.block_time
          };
        } else { // 买入ram
          this.detail = {
            name,
            dealPrice: '--', // 成交价
            dealCount: '--', // 成交量
            subAvgMoney: money, // 成交金额
            time: res.block_time
          };
        }
        setTimeout(() => {
          this.loading = false;
        }, 100);
      });
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

$-color: #278eda;
$-color1: #E51C23;
$-color2: #67C269;

.colorThis {
  color: $-color !important;
  cursor: pointer;
}
.orderSuccessDetail {
  position: relative;
  min-height: 50px;
  margin-top: 10px;

  .orderCaption {
    position: absolute;
    top: -35px;
    left: 38px;
    &.buy {
      color: $-color2;
    }
    &.sell {
      color: $-color1;
    }
  }

  .orderheard {
    padding: 0 38px;
    justify-content: space-between;

    .trxidbox {
      display: inline-block;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: $-color;
      cursor: pointer;
    }

    .wordWrap {
      display: inline-block;
      padding-left: 5px;
    }

    div {
      font-size: 14px;

      p {
        line-height: 24px;
        color: #999;
        padding: 0 0 5px;
      }

      span {
        font-size: 14px;
      }
    }
  }
}

.theme-1B1D27{
  .orderSuccessDetail .orderbody .bright .tbox span,
  .orderSuccessDetail .orderbody .bleft .tbox span, .orderbody .accoutTo {
    color: #999
  }

  .orderSuccessDetail .orderheard {
    border-color:rgba(255, 255, 255, 0.1);
  }

  .accoutTo {
    color: #999 !important;
  }
}

</style>

